<template>
  <!-- 疾控单位列表 -->
  <div class="jKongList">
    <MyHead title="疾控单位列表"></MyHead>
    <div class="search-box">
      <van-search
        v-model="searchValue"
        shape="round"
        background="white "
        placeholder="搜索疾控名称"
        @search="onSearch"
        @clear="onClear"
      />
    </div>
    <div class="content-box">
      <div class="item-box" v-for="(item, index) in jikongList" :key="index">
        <div class="title">{{ item.area }}</div>
        <div class="city-box">
          <div
            class="city-style flexb"
            v-for="(i, index) in item.list"
            :key="index"
            @click="goCity(i)"
          >
            <div class="name-box">
              <div class="img-box" v-if="i.header_image">
                <img :src="sourceURL + i.header_image" alt="" />
              </div>
              <div class="img-box" v-else>
                <img src="../../assets/images/jk-ico.jpg" alt="" />
              </div>
              <div>{{ i.name }}</div>
            </div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 
<script>
import { sourceURL } from "../../api/request";
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      searchValue: "",
      jikongList: [],
    };
  },
  computed: {},
  methods: {
    /*搜索*/
    async onSearch(value) {
      this.$toast(value);
      if (value) {
        let res = await this.$ajax.jkongList({
          openid: this.openid,
          depart_name: value,
        });
        if (res.code == 1) {
          if (res.data.length > 0) {
            this.jikongList = res.data;
          } else {
           setTimeout(()=>{
            this.$toast("暂无匹配信息！");
           },1000);
            this.getJkong();
          }
        }
      }
    },
    onClear() {
      this.getJkong();
    },
    /*疾控信息*/
    async getJkong() {
      let res = await this.$ajax.jkongList({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.jikongList = res.data;
      }
    },
    goCity(i) {
      this.$router.push({
        name: "unitHomePage",
        query: { depart_code: i.depart_code },
      });
      // Unit home page单位主页
    },
  },
  mounted() {
    this.getJkong();
  },
};
</script>
    
<style lang="scss" scoped>


.jKongList {
  background-color: #f8f8f8;
  min-height: 100vh;
  height: 100%;
  .search-box {
  }
  .content-box {
    background: white;
    padding: 10px 20px;
    .item-box {
      .title {
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        font-weight: bold;
        line-height: 30px;
      }
      .city-box {
        color: rgba(16, 16, 16, 1);
        font-size: 13px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        line-height: 25px;
        .city-style {
          .name-box {
            display: flex;
            .img-box {
              width: 18px;
              height: 22px;
              overflow: hidden; /* 隐藏超出容器的部分 */
              img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* 等比例缩放并裁剪，保持图片不变形 */
              }
            }
          }
        }
      }
    }
  }
}
</style>